<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>showData</title>
    {# BootStrap css引入 #}
    <link rel="stylesheet" href="{{ url_for('static',filename='/libs/bootstrap-4.5.0-dist/css/bootstrap.min.css') }}">
    {# fontawesome css引入 #}
    <link rel="stylesheet" href="{{ url_for('static',filename='/libs/fontawesome-free-5.15.1-web/css/all.min.css') }}">

    <script src="{{ url_for('static',filename='/libs/jquery-3.5.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='/libs/echarts.min.js') }}"></script>
    <script src="{{ url_for('static',filename='/libs/popper.min.js') }}"></script>
    <script src="{{ url_for('static',filename='/libs/bootstrap-4.5.0-dist/js/bootstrap.min.js') }}"></script>
    {# 引入 ECharts 文件 #}
    <script src="../static/js/anhui.js"></script>
    <script src="{{ url_for('static',filename='/js/anhuicontroller.js') }}"></script>
    <link href="../static/css/main.css" rel="stylesheet"/> <!-- 引入css样式表 -->

    <style>
        .bg-pink {
            background-color: #ffb7da;
        }

        .card {
            margin-bottom: 5px;
        }

        .card-body {
            text-align: center;
        }

        .card-body p {
            height: 40px;
            font-size: 30px;
            font-weight: bold;
        }

        .nav {
            background: #333;
        }

        .nav .nav-item {
            padding: 10px;
            color: #b0b0b0;
        }

        .nav .nav-item a {
            text-decoration: none;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
        }
    </style>

</head>
<body>
<div class="container">
    {% include 'header.html' %}
    <div class="text-title-box mt-5 ml-3 mb-2 badge badge-info">
        <h1 class="text-white">安徽疫情地图概览</h1>
    </div>

    <div>
        <div id="anhuiMap" style="width:800px; height:600px"></div>
    </div>

</div>

<script type="text/javascript">

    var anhuiMap = echarts.init(document.getElementById('anhuiMap'));
    var anhuiMap_option = {
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                if (params.value) {
                    return params.seriesName + '<br/>' + params.name + ' : ' + params.value;
                } else {
                    return params.seriesName + '<br/>' + params.name + ' : ' + '0';
                }

            }
        },
        visualMap: {
            min: 0,
            max: 500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],//取值范围的文字
            inRange: {
                color: ['#FFE4B5', 'red']//取值范围的颜色
            },
            show: true//图注
        },
        series: [
            {
                name: '安徽',
                type: 'map',
                mapType: '安徽',
                hoverable: true,
                dataRangeHoverLink: true,
                zoom: 1.2,
                selectedMode: 'single', // 同时只能一块区域变色
                label: {                  //显示各地方名称
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#101010',
                            fontSize: 12,
                        },
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: '#101010',
                            fontSize: 12,
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: .5, //区域边框宽度
                        borderColor: '#009fe8', //区域边框颜色
                        areaColor: "#ffefd5", //区域颜色
                    },
                    emphasis: { //鼠标滑过地图高亮的相关设置
                        borderWidth: .5,
                        borderColor: '#4b0082',
                        areaColor: "#fff",
                    }
                },
                data: []
            }
        ]
    };

</script>
</body>
</html>